<template>
	<el-select v-model="modelAsString" :placeholder="placeholder" :clearable="clearable">
		<el-option v-for="data in dataList" :key="data.value" :label="data.label" :value="data.value">{{ data.label }}</el-option>
	</el-select>
</template>

<script setup lang="ts" name="MaDictSelect">
import { useDict } from '/@/utils/dict';
import { computed } from 'vue'

const props = defineProps({
	dictType: {
		type: String,
		required: true
	},
	clearable: {
		type: Boolean,
		required: false,
		default: () => false
	},
	placeholder: {
		type: String,
		required: false,
		default: () => ''
	}
})

const model = defineModel<number | string>()
const modelAsString = computed({
	get() {
		return model.value != undefined ? model.value.toString() : ''
	},
	set(value) {
		model.value = value
	}
}) 
const dataList = useDict(props.dictType)[props.dictType]
</script>
